<template>
    <div class='chat-window'>
        <div class="chat-history">
            <ul>
                <li v-for="message in messages" :key="message.id">
                    <span>{{ message.author }}:</span>{{ message.text }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            messages: [
                { id: 1, author: 'Alice', text: 'Hi Bob!' },
                { id: 2, author: 'Bob', text: 'Hey Alice!' },
            ],
            inputText: '',
        }
    },
    methods: {
        sendMessage(){
            if(this.inputText.trim()===''){
                return;
            }
            const newMessage={id:this.messages.length+1,author:'Me',text:this.inputText};
            this.messages.push(newMessage);
            this.inputText='';

        }
    }
}
</script>
<style scoped lang='scss'>
.chat-window {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .chat-history {
    flex-grow: 1;
    overflow-y: scroll;
  }
  
  .chat-history ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .chat-history li {
    margin-bottom: 10px;
  }
  
  .chat-history li span {
    font-weight: bold;
  }
  
  .chat-input {
    display: flex;
    margin-top: 10px;
  }
  
  .chat-input input {
    flex-grow: 1;
    margin-right: 10px;
  }
  
  .chat-input button {
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
</style>
